<%@page contentType="content-type: application/x-javascript" pageEncoding="UTF-8" %>
<%@taglib prefix="s" uri="/struts-tags" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>

google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);

function drawChart() {
	var data;
	var options;
	var chart;
	<s:iterator value="matriz" status="fila">
		<s:set name="datos" value="matriz[#fila.index]" />
		<s:if test="%{#datos.size>0}">
		data = new google.visualization.DataTable();
		data.addColumn('string', '<s:text name="estadisticas.graficos.fecha"/>');
		data.addColumn('number', '<s:text name="estadisticas.graficos.usuarios"/>');
		data.addRows([
		<s:iterator value="datos" status="fila2">
			<s:if test="%{#fila2.index<10}"> ['<fmt:formatDate value="${fecha}" pattern="dd/MM/yyyy" />', ${numero}], </s:if>
		</s:iterator>
		]);
		options = {'title':'<s:text name="estadisticas.comparar_usuarios_pais.titulo_grafico"/> ${fila.count}','width':'100%','height':'300'};
		chart = new google.visualization.LineChart(document.getElementById('chart_div${fila.index}'));
		chart.draw(data, options);
		</s:if>
	</s:iterator>
}

var FORMULARIO = {
	
	inicio : function() {
		var formulario = $('#formulario form');
		formulario.find('select').change(function() {
			$(this).parent().next().val($(this).find('option:selected').text());
		});		
		var desde = $('#desde');
		var hasta = $('#hasta');
		desde.datepicker({ dateFormat: 'dd/mm/yy', prevText: '<s:text name="comun.paginacion.anterior.text"/>', nextText: '<s:text name="comun.paginacion.siguiente.text"/>', constrainInput: true, showButtonPanel: true, closeText: ' ' });
		hasta.datepicker({ dateFormat: 'dd/mm/yy', prevText: '<s:text name="comun.paginacion.anterior.text"/>', nextText: '<s:text name="comun.paginacion.siguiente.text"/>', constrainInput: true, showButtonPanel: true, closeText: ' ' });
		formulario.find('button.calendario').click(function() {
			$(this).prev().find('input').datepicker('show');
		});
		desde.change(function() {
			hasta.datepicker('option','minDate',$(this).val());
		});
		hasta.change(function() {
			desde.datepicker('option','maxDate',$(this).val());
		});
	}
	
}

$(document).ready(function() {
	FORMULARIO.inicio();
});